<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>



    <script>
   
    </script>





    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .part-5 .title{
            background: lightblue;
        }
        .part-5 .text {
            height: 136px;
            line-height: 136px;
            padding-left: 20px;
        }

        .part-5 .nation-table-cell-arrow {
            background-image:
                url();
            display: inline-block;
            width: 136px;
            height: 136px;
            position: absolute;
            right: 0;
            /* background: lightblue; */
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%;
            -webkit-transform: rotate(180deg) translateZ(0);
            transform: rotate(180deg) translateZ(0);
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
        }



        .part-5 .arrow-active {
            transform: rotate(0deg) translateZ(0);
        }
    </style>

    <div class="part-5">
        <div class="title" onclick="toggle_this(this)" >
            <span class="text"> New York </span>
            <span class="nation-table-cell-arrow "></span>
        </div>
        <p  class="content"  >Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid at nulla, rem, ratione tempora veniam reprehenderit inventore ea in placeat distinctio eius nam recusandae ullam id ducimus fugiat itaque obcaecati. Nisi in cum molestias quos est hic debitis quod laborum rerum ipsa distinctio quo eaque quidem eos nostrum sint odit perferendis expedita voluptates, sapiente, iure aperiam! Consequatur quidem corporis autem dicta? Vero id tenetur voluptatibus vitae.</p>
    </div>


    <script>
        // document.getElementsByClassName("text")[0].onclick = function () {
        //     // document.getElementsByClassName("nation-table-cell-arrow")[0].style.cssText = "    ";
        //     document.getElementsByClassName("nation-table-cell-arrow")[0].classList.toggle("active")
        // }
        function toggle_this(eee) {
            var accordionsss = document.querySelectorAll(".title");
            // 循环绑定点击事件: 
            for (let i = 0; i < accordionsss.length; i++) {
                if (accordionsss[i] == eee) {
                    eee.classList.toggle('active');
                    //  下个元素,  获取内容区的高度
                    let panel = eee.nextElementSibling;
                    console.log("现在的容器的高度是:     " + panel.style.maxHeight);

                    // 如果内容区的高度为真,  不为空, 说明这个内容区被撑开:
                    if (panel.style.maxHeight) {
                        console.log("现在的容器的高度是:     " + panel.style.maxHeight);   // 如果容器有高度值, 那么就把它变成 null
                        panel.style.maxHeight = null;
                        console.log("  maxHeight = null,  现在的容器的高度是:     " + panel.style.maxHeight);
                    } else {
                        console.log("现在的容器的高度是 nulllll   ");
                        panel.style.maxHeight = panel.scrollHeight + "px";      // 如果容器没有高度值, 那么就把它变成 容器的高度
                        console.log("   panel.scrollHeight + ,  现在的容器的高度是:     " + panel.style.maxHeight);
                    }
                } else {
                    accordionsss[i].nextElementSibling.style.maxHeight = null;
                    accordionsss[i].classList.remove('active');
                }
            }
        }
    </script>


  
    


</body>

</html>